<template>
  <div>
      <bro-one   :tdata="tdata"></bro-one>
      <hr>
      <bro-two @sendtwo="getData"></bro-two>
      <hr>
      <h1>子组件通过$parent传的值：{{zfood}}</h1>
      <button @click="getson">获取子组件 给子组件传数据</button>
  </div>
</template>

<script>
import broOne from './broOne'
import broTwo from './broTwo'

// vue的组件通讯方式
  // 1.父传子： 子组件设置props 父组件通过v-bind传参
  // 2.子传父： 父组件自定义事件,子组件通过this.$emit触发事件并传参，函数的形参就是传递值
  // 3.兄弟组件传值，eventBus 方式 this.$bus.$emit()触发事件传递数据，用this.$bus.$on监听事件传递数据
  // 4.ref获取子组件，向子组件传递数据
  // 5.this.$children 获取所有子组件 向子组件传递数据
  // 6.this.$parent 获取父组件 向父组件传递数据 
  // 7.通过vue路由的params和query传参
  // 8.vuex 传参
  // 9.localStorage传参

export default {
  name: '2209vueIndex',
  components:{
    broOne,
    broTwo
  },
  data() {
    return {
      tdata:"",
      zfood:""
    };
  },

  mounted() {
    
  },

  methods: {
    getData(val){ //接收子传父
        this.tdata=val;
    },
    getson(){
      //  this.$children获取子组件的数组 并可以操作子组件的数据和方法并传值
      console.log(this.$children)
      this.$children[1].run("快跑，快跑");
    },
    eat(zfood){
      this.zfood=zfood;
 
    }
  },
};
</script>